import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login/Login.vue'
import Reg from '@/views/Reg/Reg.vue'
import Main from '@/views/Main/Main.vue'

import store from '../store' // 前置守卫需要调用

import 'echarts/charts' // 导入 charts
import Home from '../views/menus/Home/Home.vue'

Vue.use(VueRouter)

// 把下面的代码粘贴到路由模块中对应的位置，即可防止路由报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

// 路由规则数组
const routes = [
  // 一个对象表示一条规则
  {
    path: '/login',
    component: Login
  },
  {
    path: '/reg',
    component: Reg
  },
  {
    path: '/',
    component: Main,
    // 重定向到 /home
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: Home
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 导航前置守卫，拦截未登录
// to    : 到哪里去
// from  : 从哪里来
// next  : 是否放行，函数，调用不传参表示放行，传入 false 表示不放行，传入 path 可以强行跳转至指定路径
router.beforeEach((to, from, next) => {
  // 在特定的条件下强制跳转至 /login
  // 条件1: 未登录，没有 token
  // 条件2: 要去的页面不是 /login 和 /reg (白名单)
  // 如果未登录时要允许访问的页面很多，需要在后面继续加 && 判断条件，这样代码美观度比较低，语法也不够精简。
  // if (!store.state.user.token && to.path !== '/login' && to.path !== '/reg')

  // 白名单：不管登没登陆都可以访问的页面
  const whileList = ['/login', '/reg']

  // includes: 包含,判断指定的元素是否在数组中
  // 没有 token 并且 不是去登录和注册页面，就强制跳转登录页面
  if (!store.state.user.token && !whileList.includes(to.path)) {
    // 给用户一个提示
    Vue.prototype.$message.error('未登录，请先登录!')
    return next('/login')
  }
  next()
})
export default router
